<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <meta name="keywords" content="404" />
    <meta name="description" content="404" />
    <meta name="Author" content="larry" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="${base}/larryms/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/animate.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/uidemo.css" media="all">
</head>

<body class="larryms-layout-bgA box-blank gird-demo-box">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-fluid margin15">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body">
                    <p class="library-tips" style="padding:15px 0px;">
                        向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
                    </p>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg6 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    <strong>基本按钮</strong>
                </div>
                <div class="layui-card-body larryms-card-btnbox">
                    <button class="layui-btn layui-btn-primary">原始按钮</button>
                    <button class="layui-btn">默认按钮</button>
                    <button class="layui-btn layui-btn-normal">百搭按钮</button>
                    <button class="layui-btn layui-btn-warm">暖色按钮</button>
                    <button class="layui-btn layui-btn-danger">警告按钮</button>
                    <button class="layui-btn layui-btn-disabled">禁用按钮</button>
                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    <strong>按钮尺寸</strong>
                </div>
                <div class="layui-card-body larryms-card-btnbox">
                    <button class="layui-btn layui-btn-lg">大型按钮</button>
                    <button class="layui-btn">默认按钮</button>
                    <button class="layui-btn layui-btn-sm">小型按钮</button>
                    <button class="layui-btn layui-btn-xs">迷你按钮</button>
                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    <strong>圆角按钮</strong>
                </div>
                <div class="layui-card-body larryms-card-btnbox">
                    <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
                    <button class="layui-btn layui-btn-radius">默认按钮</button>
                    <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
                    <button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
                    <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
                    <button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    <strong>灵活的图标按钮</strong>
                </div>
                <div class="layui-card-body larryms-card-btnbox">
                    <button class="layui-btn"><i class="layui-icon"></i></button>
                    <button class="layui-btn"><i class="layui-icon"></i></button>
                    <button class="layui-btn"><i class="layui-icon"></i></button>
                    <button class="layui-btn"><i class="layui-icon"></i></button>
                    <button class="layui-btn"><i class="layui-icon"></i></button>
                    <button class="layui-btn"><i class="layui-icon"></i></button>
                    <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    <strong>按钮容器</strong>
                </div>
                <div class="layui-card-body larryms-card-btnbox">
                    <div class="layui-btn-container">
                        <button class="layui-btn">按钮一</button>
                        <button class="layui-btn layui-btn-primary">按钮二</button>
                        <button class="layui-btn layui-btn-normal">按钮三</button>
                        <button class="layui-btn layui-btn-warm">按钮四</button>
                        <button class="layui-btn layui-btn-danger">按钮五</button>
                        <button class="layui-btn">按钮六</button>
                    </div>
                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    <strong>风格混搭与按钮组</strong>
                </div>
                <div class="layui-card-body larryms-card-btnbox">
                    <button class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
                    <a href="https://www.larryms.com/cates/5.html" class="layui-btn" target="_blank">跳转的按钮</a>
                    <button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>
                    <div class="layui-btn-group" style="padding-left: 15px;">
                        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    </div>
                </div>
            </section>
        </div>

        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body">
                    <p class="library-tips" style="padding:15px 0px;">
                        你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）；详情可查看layui文档介绍
                    </p>
                </div>
            </section>
        </div>
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body" style="padding: 20px 15px;">
                    <blockquote class="layui-elem-quote larryms-doc-quote" style="font-size: 16px;">关于按钮在larryMS框架中做了很大的扩展，正如layui官方文档中所介绍的一样，配合主题、尺寸等元素可以组合出各式各样的的按钮，详情可在LarryMS框架开发者文档中查看使用技巧与方法</blockquote>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- 加载js文件-->
<script type="text/javascript" src="${base}/larryms/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        version: "2.0.8",
        base: '${base}/larryms/',
        page: 'layuidemo'
    }).extend({
        larry: 'js/base'
    }).use('larry');
</script>
</body>

</html>
